import React, { Component } from 'react'
import { SearchBar, Button, WhiteSpace, WingBlank, Icon } from 'antd-mobile';
import YHNav from '../nav/YHNav';
import { getProductList } from "../../data/api";
import styles from "./GoodList.module.scss";
import { Toast } from "antd-mobile";

import {withRouter} from "react-router-dom"


// 搜索中心
// import { searchGoods } from "../../data/api"

 class GoodList extends Component {

    state = {
        goods: [], //  放产品信息
    }
    pagenum = 1;
    pagesize = 20;
    cid = "";
    query = "";
    total = 0;  //总数，，默认0条
    loading = false;

    componentDidMount() {
        console.log(this.props,1111);
        // 处理从分类页面跳转的情况cid
        let arr = this.props.location.search.split("?")[1].split("=");
        // console.log(arr);
        if (arr[0] === "cid") {
            this.cid = arr[1]
        }

        // if (arr[0] === "query") {
        //     this.query = arr[1]
        // }


        // 处理从首页进来的跳转query


        this.getProductList();
        // console.log(res);
        // 监听页面滚动
        window.addEventListener("scroll", this.handleScroll);
    }

    // 当组件销毁的时候，取消scroll事件
    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll);
    }

    handleScroll = (params) => {
        // console.log("滚动啦");
        let documentElement = document.documentElement;
        // 可以滚动的额距离
        let scrollHeight = documentElement.scrollHeight;
        // console.log("可以滚动的距离", scrollHeight);
        // 窗口的高度
        let clientHeight = documentElement.clientHeight;
        // console.log("窗口高度", clientHeight);
        // 已经滚动的距离
        let scrollTop = documentElement.scrollTop;
        // console.log("已经滚动的距离", scrollTop);
        // console.log(scrollHeight - scrollTop - clientHeight < 1 ? "触底啦" : "");

        if (scrollHeight - scrollTop - clientHeight < 1) {
            this.getProductList();
        }

    }
    // 获取产品列表
    getProductList = async (params) => {
        if ((this.pagenum <= Math.ceil(this.total / this.pagesize) || this.total === 0) && this.loading === false) {
            this.loading = true;
            params = params || {};
            if (this.cid) {
                params.cid = this.cid
            }

            // if (this.query) {
            //     params.query = decodeURIComponent(this.query);
            // }

            let res = await getProductList({
                ...params,
                pagenum: this.pagenum++,
                pagesize: this.pagesize

            });
            this.loading = false;  //加载完成
            this.total = res.message.total || 0;
            console.log(this.total);
            // 设置state goods的信息
            this.setState({
                goods: [...this.state.goods, ...res.message.goods],

            })
        } else {
            Toast.success('已经到底了哦', 1);
        }
    }

    // 点击列表项跳转到详情页面
    handleItemClick = (goods_id) => {
        this.props.history.push("/goodDatail/" + goods_id);
    }


    render() {
        return (
            <div>
                {/* 搜索框的开始 */}
                <YHNav title="商品列表"></YHNav>
                <SearchBar placeholder="搜索" cancelText="搜索" onChange={this.handleChange} />
                {/* <div className="scList">
                    {
                        this.state.goodList.map((v,i)=>{
                            return <div className="scListItem" key={v.goods_id}>
                                {v.goods_name}
                            </div>
                        })
                    }
                </div> */}
                {/* 搜索框的结束 */}

                {/* 商品列表开始  商品列表的盒子 */}
                <div className={styles.glContent}>
                    <div className={styles.productList}>
                        {this.state.goods.map((v, i) => {
                            return <div
                                onClick={this.handleItemClick.bind(this, v.goods_id)}
                                className={styles.listItem} key={v.goods_id}>
                                <div className={styles.listTop}>
                                    <img src={v.goods_small_logo} alt="" />
                                </div>
                                <div className={styles.listBtm}>
                                    <div className={styles.itemBtmtop}>
                                        {v.goods_name}
                                    </div>
                                    <div className={styles.itemBtmbtm}>
                                        ¥{v.goods_price}
                                    </div>
                                </div>
                            </div>
                        })
                        }
                    </div>
                </div>
                {/* 商品列表结束 */}
            </div>
        )
    }
}
export default withRouter(GoodList)
